<template>
  <div class="step">
    <ContentWrap class="h-1/1">
      <!-- 添加步骤 -->
      <el-dropdown class="add-step" @command="handleCommand">
        <span class="el-dropdown-link">
          添加步骤<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <span class="divide">请求接口</span>
          <el-dropdown-menu>
            <el-dropdown-item :icon="Download"
              :command="{ type: 'interface', data: null, position: '' }">从接口导入</el-dropdown-item>
            <el-dropdown-item :icon="DocumentAdd"
              :command="{ type: 'case', data: null, position: '' }">从接口用例导入</el-dropdown-item>
            <el-dropdown-item :icon="User"
              :command="{ type: 'customer', data: null, position: '' }">添加自定义请求</el-dropdown-item>
          </el-dropdown-menu>
          <!-- <span class="divide">逻辑控制</span>
          <el-dropdown-menu>
            <el-dropdown-item :icon="Refresh"
              :command="{ type: 'for', data: null, position: '' }">循环控制器</el-dropdown-item>
            <el-dropdown-item :icon="Sort" :command="{ type: 'if', data: null, position: '' }">条件控制器</el-dropdown-item>
          </el-dropdown-menu> -->
          <span class="divide">其他</span>
          <el-dropdown-menu>
            <!-- <el-dropdown-item :icon="Edit"
              :command="{ type: 'script', data: null, position: '' }">脚本操作</el-dropdown-item> -->
            <el-dropdown-item :icon="Timer"
              :command="{ type: 'time', data: null, position: '' }">等待时间</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <header>
        <el-checkbox v-model="isAllChecked" :indeterminate="isIndeterminate" @change="handleHeaderCheckboxChange" />共{{
          dataSource.length }}个步骤
        <span v-if="checkedNodes.length" class="btn">
          <!-- <el-button type="primary" plain size="small" @click="message.warning('此功能仍在开发中，敬请期待！')">
            <Icon icon="ep:video-play" class="mr-3px"/>批量执行
          </el-button> -->
          <el-button type="primary" plain size="small" @click="handleMultipleDelete">
            <Icon icon="ep:delete" class="mr-3px" />批量删除
          </el-button>
        </span>
      </header>
      <el-tree ref="treeRef" class="step-tree" :data="dataSource" show-checkbox node-key="id" default-expand-all
        :draggable="true" :allow-drop="allowDrop" :allow-drag="allowDrag" :expand-on-click-node="false"
        :props="defaultProps" @check-change="handleCheckChange" @node-click="handleNodeClick" @node-drop="handleDrop">
        <template #default="{ node, data }">
          <section :class="node.isLeaf ? 'leaf' : 'notleaf'">
            <span class="icon">
              <el-switch v-model="data.status" size="small" @click.stop @change="changeStatus" />
              <!-- <el-icon @click.stop="data.isExecute = !data.isExecute">
                <VideoPlay color="#409eff" size="16" @click="message.warning('此功能仍在开发中，敬请期待！')" />
                <VideoPause color="#409eff" size="16" v-show="data.isExecute" />
              </el-icon> -->
            </span>
            <!-- 接口、用例、脚本、自定义请求 -->
            <div class="label" v-if="['接口', '用例', '脚本操作', '自定义请求'].includes(data.tag)">
              <span class="tag" :class="['接口', '自定义请求'].includes(data.tag) ? 'interface' : 'case'">{{ data.tag
                }}</span>
              <span class="type" :style="{ color: methodStyle[data?.requestType] }" v-if="data?.requestType">{{
                data?.requestType }}</span>
              <span v-if="!data.isEdit" class="name">{{ data.name }} <el-icon @click.stop="data.isEdit = !data.isEdit">
                  <EditPen />
                </el-icon>
              </span>
              <el-input v-else v-model="data.name" class="!w-150px" @click.stop style="height: 22px;">
                <template #append>
                  <el-button :icon="Check" type="primary" @click.stop="changeName(data)" />
                </template>
              </el-input>
            </div>
            <!-- 循环控制器 -->
            <div v-if="data.tag == 'for'" class="for-wrap">
              <span class="tag for">循环控制器</span>
              <stepFor />
            </div>
            <!-- 条件控制器 -->
            <div v-if="data.tag == 'if'" class="for-wrap">
              <span class="tag if">条件控制器</span>
              <stepIf />
            </div>
            <!-- 等待时间 -->
            <div v-if="data.tag == 'time'" class="for-wrap">
              <span class="tag time">等待时间</span>
              <stepTime :data="data" @time-form="handleTimeForm" />
            </div>
            <!-- 操作 -->
            <span class="btn">
              <a style="margin-right: 8px" @click.stop="copy(node, data)"><el-icon>
                  <CopyDocument />
                </el-icon></a>
              <!-- <el-menu class="el-menu-demo" mode="horizontal"
                v-if="['接口', '用例', '脚本操作', 'time', '自定义请求'].includes(data.tag)" :ellipsis-icon="CirclePlus"
                @click.stop="message.warning('此功能仍在开发中，敬请期待！')">
                <span class="divide">请求接口</span>
                <el-menu-item index="1-1" @click="handleCommand({ type: 'interface', data, position: '' })"
                  :disabled="true">
                  <el-icon>
                    <Download />
                  </el-icon>从接口导入
                </el-menu-item>
                <el-menu-item index="1-2" @click="handleCommand({ type: 'case', data, position: '' })" :disabled="true">
                  <el-icon>
                    <DocumentAdd />
                  </el-icon>从接口用例导入
                </el-menu-item>
                <el-menu-item index="1-3" @click="handleCommand({ type: 'customer', data, position: '' })"
                  :disabled="true">
                  <el-icon>
                    <User />
                  </el-icon>添加自定义请求
                </el-menu-item>
                <span class="divide">逻辑控制</span>
                <el-menu-item index="1-4" @click="handleCommand({ type: 'for', data, position: '' })" :disabled="true">
                  <el-icon>
                    <Refresh />
                  </el-icon>循环控制器
                </el-menu-item>
                <el-menu-item index="1-5" @click="handleCommand({ type: 'if', data, position: '' })" :disabled="true">
                  <el-icon>
                    <Sort />
                  </el-icon>条件控制器
                </el-menu-item>
                <span class="divide">其他</span>
                <el-menu-item index="1-6" @click="handleCommand({ type: 'script', data, position: '' })"
                  :disabled="true">
                  <el-icon>
                    <Edit />
                  </el-icon>脚本操作
                </el-menu-item>
                <el-menu-item index="1-7" @click="handleCommand({ type: 'time', data, position: '' })" :disabled="true">
                  <el-icon>
                    <Timer />
                  </el-icon>等待时间
                </el-menu-item>
              </el-menu>
              <el-menu class="el-menu-demo" mode="horizontal" :ellipsis-icon="CirclePlus" v-else @click.stop>
                <el-sub-menu index="1-1">
                  <template #title>添加相邻步骤</template>
                  <span class="divide">请求接口</span>
                  <el-menu-item index="1-1-1" @click="handleCommand({ type: 'interface', data, position: '' })">
                    <el-icon>
                      <Download />
                    </el-icon>从接口导入
                  </el-menu-item>
                  <el-menu-item index="1-1-2" @click="handleCommand({ type: 'case', data, position: '' })">
                    <el-icon>
                      <DocumentAdd />
                    </el-icon>从接口用例导入
                  </el-menu-item>
                  <el-menu-item index="1-1-3" @click="handleCommand({ type: 'customer', data, position: '' })">
                    <el-icon>
                      <User />
                    </el-icon>添加自定义请求
                  </el-menu-item>
                  <span class="divide">逻辑控制</span>
                  <el-menu-item index="1-1-4" @click="handleCommand({ type: 'for', data, position: '' })">
                    <el-icon>
                      <Refresh />
                    </el-icon>循环控制器
                  </el-menu-item>
                  <el-menu-item index="1-1-5" @click="handleCommand({ type: 'if', data, position: '' })">
                    <el-icon>
                      <Sort />
                    </el-icon>条件控制器
                  </el-menu-item>
                  <span class="divide">其他</span>
                  <el-menu-item index="1-1-6" @click="handleCommand({ type: 'script', data, position: '' })">
                    <el-icon>
                      <Edit />
                    </el-icon>脚本操作
                  </el-menu-item>
                  <el-menu-item index="1-1-7" @click="handleCommand({ type: 'time', data, position: '' })">
                    <el-icon>
                      <Timer />
                    </el-icon>等待时间
                  </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="1-2">
                  <template #title>添加子步骤</template>
                  <span class="divide">请求接口</span>
                  <el-menu-item index="1-2-1" @click="handleCommand({ type: 'interface', data, position: 'child' })">
                    <el-icon>
                      <Edit />
                    </el-icon>从接口导入
                  </el-menu-item>
                  <el-menu-item index="1-2-2" @click="handleCommand({ type: 'case', data, position: 'child' })">
                    <el-icon>
                      <DocumentAdd />
                    </el-icon>从接口用例导入
                  </el-menu-item>
                  <el-menu-item index="1-2-3" @click="handleCommand({ type: 'customer', data, position: 'child' })">
                    <el-icon>
                      <Timer />
                    </el-icon>添加自定义请求
                  </el-menu-item>
                  <span class="divide">逻辑控制</span>
                  <el-menu-item index="1-2-4" @click="handleCommand({ type: 'for', data, position: 'child' })">
                    <el-icon>
                      <Timer />
                    </el-icon>循环控制器
                  </el-menu-item>
                  <el-menu-item index="1-2-5" @click="handleCommand({ type: 'if', data, position: 'child' })">
                    <el-icon>
                      <Timer />
                    </el-icon>条件控制器
                  </el-menu-item>
                  <span class="divide">其他</span>
                  <el-menu-item index="1-2-6" @click="handleCommand({ type: 'script', data, position: 'child' })">
                    <el-icon>
                      <Timer />
                    </el-icon>脚本操作
                  </el-menu-item>
                  <el-menu-item index="1-2-7" @click="handleCommand({ type: 'time', data, position: 'child' })">
                    <el-icon>
                      <Timer />
                    </el-icon>等待时间
                  </el-menu-item>
                </el-sub-menu>
              </el-menu> -->
              <a style="margin-left: 8px" @click.stop="remove(node, data)"><el-icon>
                  <Remove />
                </el-icon></a>
            </span>
          </section>
        </template>
      </el-tree>
    </ContentWrap>
    <!-- 接口、用例导入 -->
    <ImportScript ref="importScriptRef" @select-nodes="handleSelectNodes" />
    <!-- 脚本操作 -->
    <scriptOperation ref="scriptOperationRef" @success="handleScriptOperation" />
    <!-- 自定义请求 -->
    <customerQuery ref="customerQueryRef" @success="handleCustomerQuery" />
    <!-- 接口、用例节点点击，展示调试详情 -->
    <viewQuery ref="viewQueryRef" @open-env="updateEnv" />
  </div>
</template>

<script setup lang="ts">
import { ArrowDown, Edit, DocumentAdd, Timer, CirclePlus, Check, Remove, CopyDocument, User, Refresh, Sort, Download, VideoPlay, VideoPause, EditPen } from '@element-plus/icons-vue'
import ImportScript from '../../debug/dialog/prepost/ImportScript.vue';
import { addNodeToTreeById, findParentNodeId, removeNodesById, replaceNodeById } from '@/utils/tree'
import stepFor from '../components/stepFor.vue';
import stepIf from '../components/stepIf.vue';
import stepTime from '../components/stepTime.vue';
import scriptOperation from '../dialog/scriptOperation.vue';
import customerQuery from '../dialog/customerQuery.vue';
import viewQuery from '../dialog/viewQuery.vue';
import { propTypes } from '@/utils/propTypes'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const importScriptRef = ref()
const scriptOperationRef = ref()
const customerQueryRef = ref()
const viewQueryRef = ref()
const defaultProps = {
  children: 'children',
  label: 'name'
}
const props = defineProps({
  data: propTypes.object.def({})
})
/** 请求类型颜色定义 */
const methodStyle = ref({
  'GET': '#17b26a',
  'POST': '#ef6820',
  'DELETE': '#f04438',
  'PUT': '#2e90fa',
})
const dataSource = ref([] as any)
let id = 0
const currentClickAddNode = ref()
const isAllChecked = ref(false);
const checkedNodes = ref([] as any);
const isIndeterminate = ref(false);
const treeRef = ref()
const positionV = ref()
const len = computed(() => dataSource.value.length)
const currentIndex = computed(() => {
  if (len.value && currentClickAddNode.value) {
    return dataSource.value.findIndex(d => d.id == currentClickAddNode.value?.id)
  }
})
const parentId = computed(() => findParentNodeId(dataSource.value, currentClickAddNode.value.id))
const emit = defineEmits(['select-nodes', 'all-nodes', 'open-env'])
const stepStyle = {
  'API': '接口',
  'API_CASE': '用例',
  'CONSTANT_TIMER': 'time',
  'CUSTOM_REQUEST': '自定义请求'
}
/** 打开环境设置弹窗 */
const updateEnv = () => {
  emit('open-env')
}
/** 顶部复选选中变化，处理树结构是否全选 */
const handleHeaderCheckboxChange = (value) => {
  if (value) {
    // 全选
    const allNodes = getAllNodes(dataSource.value);
    checkedNodes.value = allNodes.map(node => node.id);
    treeRef.value.setCheckedKeys(checkedNodes.value, true);
  } else {
    // 取消全选
    checkedNodes.value = [];
    treeRef.value.setCheckedKeys([], false);
  }
};
/** 树结构复选框选中，获取选中节点key,更新顶部节点状态 */
const handleCheckChange = () => {
  checkedNodes.value = treeRef.value.getCheckedKeys()
  // 更新全选状态
  updateIsAllChecked();
};
/** 更新顶部复选状态 */
const updateIsAllChecked = () => {
  const allNodes = getAllNodes(dataSource.value);
  isAllChecked.value = allNodes.length === checkedNodes.value.length;
  isIndeterminate.value = checkedNodes.value.length > 0 && !isAllChecked.value;
};
/** 树结构扁平化 */
const getAllNodes = (nodes) => {
  let result = [] as any;
  nodes.forEach(node => {
    result.push(node);
    if (node.children && node.children.length > 0) {
      result = result.concat(getAllNodes(node.children));
    }
  });
  return result;
};
// 监听 checkedNodes 的变化，更新全选状态
watch(checkedNodes, () => {
  updateIsAllChecked();
  emit('select-nodes', treeRef.value.getCheckedNodes())
});
/** 修改名称，重置编辑状态，向上传递数据 */
const changeName = (data) => {
  data.isEdit = !data.isEdit
  emit('all-nodes', dataSource.value)
}
/** 删除步骤 */
const remove = async (node, data) => {
  // 删除的二次确认
  try {
    await message.delConfirm()
    const parent = node.parent
    const children: Tree[] = parent.data.children || parent.data
    const index = children.findIndex((d) => d.id === data.id)
    children.splice(index, 1)
    dataSource.value = [...dataSource.value]
    emit('all-nodes', dataSource.value)
  } catch (error) {

  }
}
/** 复制步骤 */
const copy = (node, data) => {
  const parent = node.parent
  const children: Tree[] = parent.data.children || parent.data
  const index = children.findIndex((d) => d.id === data.id)
  children.splice(index, 0, { ...data, id: ++id })
  dataSource.value = [...dataSource.value]
  emit('all-nodes', dataSource.value)
}
/** 下拉点击 */
const handleCommand = ({ type, data, position }) => {
  currentClickAddNode.value = data
  positionV.value = position
  // 接口用例弹窗
  if (type == 'interface') {
    importScriptRef.value.open('从接口导入', true, ['目录', '接口'])
    return
  } else if (type == 'case') {
    importScriptRef.value.open('从接口用例导入', true, ['目录', '接口', '用例'])
    return
  } else if (type == 'script') {
    scriptOperationRef.value.open()
    return
  } else if (type == 'customer') {
    customerQueryRef.value.open()
    return
  }
  const filterArr = [{ id: ++id, tag: type, isExecute: false, status: true }]
  addNode(filterArr)
}
/** 处理弹窗选中接口或者用例 */
const handleSelectNodes = (nodes, filterList) => {
  // 过滤出需要显示的接口或者用例
  let filterArr = [] as any
  if (filterList.includes('用例')) {
    filterArr = nodes.filter(n => n.tag != '目录' && n.tag != '接口')
  } else {
    filterArr = nodes.filter(n => n.tag != '目录')
  }
  filterArr = filterArr.map(item => {
    return {
      ...item,
      isExecute: false,
      status: true,
      isEdit: false
    }
  })
  addNode(filterArr)
}

/** 脚本操作添加 */
const handleScriptOperation = (form) => {
  const filterArr = [{ id: ++id, tag: '脚本操作', name: form.name, content: form.content, isExecute: false, status: true }]
  addNode(filterArr)
}
/** 自定义请求 */
const handleCustomerQuery = ({ queryInfo, response, row }) => {
  // 存在id，为修改自定义请求
  if (row.id) {
    const filterArr = [{ id: row.id, tag: '自定义请求', name: row.name, requestType: queryInfo.query.requestType, queryInfo, response, isExecute: false, status: true }]
    replaceNodeById(dataSource.value, row.id, filterArr[0])
    emit('all-nodes', dataSource.value)
  } else {
    const filterArr = [{ id: ++id, tag: '自定义请求', name: '自定义请求', requestType: queryInfo.query.requestType, queryInfo, response, isExecute: false, status: true }]
    addNode(filterArr)
  }
}
/** 新增节点-子项、子项相邻、末尾、某节点相邻 */
const addNode = (filterArr) => {
  if (positionV.value) {
    // 添加子项
    addNodeToTreeById(dataSource.value, currentClickAddNode.value.id, filterArr)
  } else if (currentClickAddNode.value && parentId.value) {
    // 添加选中节点相邻项
    addNodeToTreeById(dataSource.value, parentId.value, filterArr)
  } else {
    // 添加进末尾
    addTree(filterArr)
  }
  emit('all-nodes', dataSource.value)
}
/** 新增节点-末尾、某节点相邻位置 */
const addTree = (list) => {
  // 如果数组为空，直接赋值
  if (!len.value) {
    dataSource.value = list
  } else if (len.value && currentIndex.value > 0) {
    // 如果有选中节点，在某个节点后进行添加
    dataSource.value.splice(currentIndex.value + 1, 0, ...list);
  } else {
    // 如果没有选中节点，在后面添加
    dataSource.value.splice(len.value, 0, ...list);
  }
}
/** 树拖动配置，哪些节点可以被拖入 */
const allowDrop = (draggingNode, dropNode, type) => {
  if (type == 'inner') {
    return false
  }
  return true
}
/** 树拖动配置，哪些节点可以拖动 */
const allowDrag = (draggingNode) => {
  return true
}
/** 拖动后 向上传递更新后的所有节点 */
const handleDrop = () => {
  emit('all-nodes', dataSource.value)
}
/** 改变状态，向上传递所有数据 */
const changeStatus = () => {
  emit('all-nodes', dataSource.value)
}
/** 树点击节点 */
const handleNodeClick = (data) => {
  if (['接口', '用例'].includes(data.tag)) {
    viewQueryRef.value.open(data)
  } else if (['自定义请求'].includes(data.tag)) {
    customerQueryRef.value.open(data)
  }
}
/** 等待时间内容变化 */
const handleTimeForm = (form, data) => {
  dataSource.value.forEach(item => {
    if (item.id == data.id) {
      item.name = form.name
      item.delay = form.time  // delay时间
    }
  })
  emit('all-nodes', dataSource.value)
}
/** 批量删除 */
const handleMultipleDelete = async () => {
  try {
    await message.delConfirm()
    const nodes = treeRef.value.getCheckedNodes()
    const ids = nodes.map(n => n.id)
    dataSource.value = removeNodesById(dataSource.value, ids)
    emit('all-nodes', dataSource.value)
  } catch (error) { }
}
onMounted(() => {
  // 数据回显
  if (props.data.steps?.length) {
    dataSource.value = props.data.steps.map(item => {
      return {
        ...item,
        status: item.status == 0 ? true : false,
        requestType: item.config && (item.stepType == 'CUSTOM_REQUEST' ? JSON.parse(item.config)?.requestType : JSON.parse(item.config)?.source?.requestType),
        tag: stepStyle[item.stepType],
        isExecute: false
      }
    }
    )
  }
})
</script>

<style scoped lang="scss">
.step {
  height: 100%;

  .name {
    margin-left: 5px;

    .el-icon {
      display: none;
      position: relative;
      top: 2px;
    }

    &:hover {
      .el-icon {
        display: inline-block
      }
    }
  }

  .el-card {
    margin-right: 5px;
  }

  // height: 100%;
  .drag-handle {
    cursor: move;
    margin-right: 10px;
  }

  .el-dropdown.add-step {
    padding: 10px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #1a85ffb8;
    border: 1px solid var(--el-border-color-light);
    background: var(--el-bg-color);
    margin-bottom: 10px;
  }

  header {
    padding: 0 0 0 9px;
    font-size: 14px;
    display: flex;
    align-items: center;
    position: relative;

    .el-checkbox {
      margin-right: 5px;
    }

    .btn {
      position: absolute;
      right: 0;
    }
  }

  .step-tree {
    overflow: auto;
    height: calc(100% - 22px);

    :deep(.el-tree-node__content) {
      border: 1px solid var(--el-border-color-light);
      border-radius: 5px;
      padding: 5px;
      margin-bottom: 5px;

      &:hover {
        .btn {
          display: flex;
        }
      }

      .leaf,
      .notleaf {
        display: flex;
        // justify-content: space-between;
        align-items: center;
      }

      .notleaf {
        width: calc(100% - 45px);

        .for-wrap {
          width: calc(100% - 130px);
        }

        .icon {
          margin-right: 10px;
        }
      }

      .leaf {
        width: calc(100% - 20px);

        .label {
          position: relative;
          left: 10px;
        }

        .for-wrap {
          position: relative;
          left: 10px;
          width: calc(100% - 130px);
        }
      }

      >.el-icon {
        position: relative;
        left: 22px;
      }

      >.el-icon+.el-checkbox {
        position: relative;
        left: -15px;
      }

      /* 只对叶子节点的复选框进行特殊处理 */
      >.el-icon.is-leaf+.el-checkbox {
        position: relative;
        left: 10px;
        margin-right: 20px;
      }

      >.el-icon.is-leaf {
        display: none;
      }

      .tag {
        border-style: solid;
        border-width: 1px;
        border-radius: 0 10px 10px 0;
        padding: 0 5px;
        margin-right: 5px;
        font-size: 12px;
      }

      .interface {
        border-color: #409eff;
        color: #409eff;
      }

      .case {
        border-color: #00a552;
        color: #00a552;
      }

      .type {
        font-size: 12px;
        margin-right: 5px;
        font-weight: bold;
        margin-left: 5px;
      }

      .for {
        color: #a762bf;
        border: 1px solid #a762bf;
      }

      .if {
        color: #ee50a3;
        border: 1px solid #ee50a3;
      }

      .time {
        color: #ffc14e;
        border: 1px solid #ffc14e;
      }

      .el-menu-demo {
        width: 14px;
        border: none;
        height: 14px;

        .el-icon {
          font-size: 14px;
          width: 14px;
        }

        .el-sub-menu__title {
          height: 14px;
          padding: 0;
        }

      }

      .btn {
        display: flex;
        align-items: center;
        display: none;
        position: absolute;
        right: 5px;

        .el-icon {
          left: 0;
        }
      }

      .for-wrap {
        display: flex;
        align-items: center;

        .el-form {
          width: calc(100%);
          overflow: auto;

          .el-form-item {
            margin: 0 10px 0 0;
          }
        }
      }

      .icon {
        // width: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

}

.divide {
  padding: 0px 15px 0;
  color: var(--el-text-color-placeholder);
  display: block;
}

.divide:first-child {
  padding: 10px 15px 0;
}

/* 隐藏整个滚动条 */
.hide-scrollbar {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  /* 隐藏滚动条宽度 */
  height: 0;
  /* 隐藏滚动条高度 */
}

/* 定制滚动条的样式 */
.custom-scrollbar {
  scrollbar-width: 1px;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.custom-scrollbar::-webkit-scrollbar {
  width: 2px;
  /* 滚动条宽度 */
  height: 2px;
  /* 滚动条高度 */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  /* 轨道背景颜色 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  /* 滑块颜色 */
  border-radius: 5px;
  /* 滑块圆角 */
}

.custom-scrollbar::-webkit-scrollbar-button,
.custom-scrollbar::-webkit-scrollbar-corner {
  display: none;
  /* 隐藏上下按钮和角落 */
}

/* 移除选中效果 */
:deep(.el-menu-item.is-active) {
  color: inherit !important;
}

:deep(.el-sub-menu.is-active>.el-sub-menu__title) {
  color: inherit !important;
  border: none;
}

:deep(.el-sub-menu__title) {
  color: inherit !important;
  border: none;
}

:deep(.el-sub-menu.is-active>.el-icon) {
  color: inherit !important;
}
</style>
